專案成果報告 // COURSE PROJECT REPORT

CYBERCHAT

Flask · Firebase · PWA · GitHub · Cyberpunk UI

學生:阮文孟
學號:1111310035
日期:
// DEVELOPMENT LOG CyberChat 開發流程 — 七個關鍵步驟
🔥
STEP 01
Firebase 初始化與配置

任務: 為應用程式建立雲端儲存的「大腦」。
行動: 在 Firebase 上建立新專案,設置 Realtime Database,讓訊息能夠即時傳輸。
結果: 成功取得資料庫 URL,並將其串接到 Python 原始碼中。

📄
STEP 02
撰寫專業的 README.md 文件

任務: 為 GitHub 上的專案打造專業的「門面」。
行動: 配置了:簡介、功能特點、技術棧(Flask, Firebase, PWA)以及安裝指南。

⚙️
STEP 03
解決環境錯誤與 Git 安裝

任務: 準備好將程式碼上傳到雲端的工具。
行動: 遇到了 git : 無法辨識... 的錯誤,確認原因在於電腦尚未安裝 Git。
結果: 成功完成 Git 安裝,並開始熟悉終端機(Terminal)的指令操作。

🪪
STEP 04
設置使用者身份 (Git Config)

任務: 在原始碼中「署名」。
行動: Git 要求宣告 user.emailuser.name。執行全域配置指令,讓 Git 記錄誰是這項專案的作者。

🌿
STEP 05
解決分支衝突 (Branch Conflict)

任務: 將程式碼推送到 GitHub 上的正確「車道」。
行動: 由於本地分支名稱(master)與 GitHub 預設分支名稱(main)不一致導致推送失敗。
解決方案: 使用 git branch -M main 指令重命名分支,並成功完成同步。

🚀
STEP 06
完成 GitHub 專案部署

任務: 將原始碼正式上傳至 Repository。
行動: 在執行 git add . → git commit → git push 指令後,在 GitHub 網頁上看到完整的專案資料夾結構。

🖥️
STEP 07
製作網頁版報告 (HTML / Tailwind)

任務: 以令人印象深刻的方式展示學習成果。
行動: 提供了 15 張記錄整個過程的照片。建立了一個 Cyberpunk 視覺風格的 index.html 檔案,並整合了圖片放大功能 (Lightbox),方便教授或老師查看細節。



// PERSONAL LOG 學習心得與感想
💻 // REFLECTION — 阮文孟 / 1111310035

今天的内容对我来说既充满挑战又极具成就感。我们从零 bắt tay vào làm (动手) 制作了一个基于 Cyberpunk 风格的 CyberChat PWA 聊天系统。

起初,面对 Firebase 的云端配置和 Flask 的后端逻辑,我感到有些手忙脚乱。尤其是在处理实时数据的同步更新以及 PWA 的离线缓存设置时,遇到了不少 Bug。但是,当我在 Firebase Console 看到数据随着我的操作实时跳动,以及在浏览器中看到那抹酷炫的霓虹黄与青色的界面时,所有的疲惫都一扫而空。

最让我难忘的是最后将代码推送到 GitHub 的过程。虽然中间遇到了 Git 环境配置和远程连接的报错,但在一步步解决 "src refspec main does not match" 这些经典错误后,看到终端显示 100% 完成,并成功在 GitHub 仓库看到我的 app.pyREADME.md 时,我真正体会到了作为一名 IT 学生所拥有的掌控感。

这次经历让我明白,编程不只是写出能运行的代码,更是一个关于逻辑、耐心以及如何向世界展示自己成果的过程。看着在 GitHub 上静静运行的仓库,我知道这不仅是一份作业,更是我技术成长的见证。